<template>
  <div>
    <!-- 添加按钮 -->
    <el-button type="primary" @click="willAdd">添加</el-button>
    <!-- 列表表格 -->
    <v-list @edit="willEdit" :list="list" @init="init"></v-list>
    <!-- 弹框 -->
    <v-form ref="form" :info="info" :list="list" @init="init"></v-form>
    <!-- 分页 -->
    <!-- 
        total：总数
        layout="prev, pager, next" prev表示上一页，next为下一页，pager表示页码列表
        page-size:设置一页的数量
    -->
    <el-pagination
      layout="prev, pager, next"
      :total="count"
      :page-size="size"
      background
      @current-change="changePage"
    ></el-pagination>
  </div>
</template>
<script>
import vList from "./components/list.vue";
import vForm from "./components/form.vue";
import { reqmenulist, requsercount, requserlist } from "../../request/api";
export default {
  components: {
    vList,
    vForm,
  },
  data() {
    return {
      list: [],
      count: 0, //管理员总数
      size: 2, //一页的数量
      page: 1, //当前的页码
      info: {
        isshow: false,
        isAdd: true, //用来判断是添加还是编辑
      },
    };
  },
  mounted() {
    //请数据
    this.init();
  },
  methods: {
    //点了添加
    willAdd() {
      this.info = {
        isshow: true,
        isAdd: true,
      };
    },
    //点了编辑
    willEdit(uid) {
      this.info = {
        isshow: true,
        isAdd: false,
      };
      //通知form调用getOne
      this.$refs.form.getOne(uid)

    },
    //进来就获取数据
    init() {
      //请列表
      this.getlist()

      //2.请总数
      requsercount().then(res=>{
        if(res.data.code==200){
          this.count=res.data.list[0].total;
        }
      })
     
    },
    getlist(){
      //1.进来就请求数据
       requserlist(
       {
         page: this.page,
          size: this.size,
       }
      ).then((res) => {
        if (res.data.code == 200) {
          // / 取回来的数据是个空数组，而且不是当前页不是第一页,取上一页的数据
         let list = res.data.list ? res.data.list : [];
         if(list.length==0&&this.page!=1){
           this.page--;
           this.getlist()
           return;
         }
         this.list = res.data.list ? res.data.list : [];
        }
      });
    },
    changePage(page){
      this.page=page;
      this.getlist()
    }
  },
};
</script>
<style lang="less" scoped>
@import "../../less/index.less";
div {
  padding: @margin;
}
</style>